<template>
  <!-- 地块信息 制作时间：2024-3-12 -->
  <div class="traceability">
    <!-- 列表 -->
    <div class="tableList">
      <div class="back" @click="back()">
        <i class="el-icon-back"></i>返回
      </div>
      <div class="hasDiv">
        <div class="textCenter">你真的知道溯源有什么用吗？</div>
        <div class="centerLine">
          <!-- <img src="@/assets/images/组 126.png" class="textImage"/> -->
          <div class="textImage"></div>
        </div>
        <div class="mtLeft">
          <span class="greenRaduis"></span>
          <div>增加消费者信任度，提高消费者从接触到购买的转化率</div>
        </div>
        <div class="mtLeft">
          <span class="greenRaduis"></span>
          <div>让消费者知道优质农产品背后的不易，从而为农产品的附加值买单</div>
        </div>
        <div class="mtLeft">
          <span class="greenRaduis"></span>
          <div>为优质农产品建立品牌形象，以区别于普通农产品</div>
        </div>
        <div class="mtLeft">
          <span class="greenRaduis"></span>
          <div>一旦农产品被消费者认可，溯源会成为消费者引以为豪的谈资和炫耀点，因为他们能知道自己吃的东西是如何生产出来的，让消费者帮你去传播</div>
        </div>
      </div>
      <div class="hasDiv">
        <div class="textCenter">如何让农产品可溯源？</div>
        <div class="mtRight">
          <span class="greenLine"></span>
          01  打印溯源码
        </div>
        <!-- <img src="@/assets/images/组 126.png" class="rightImg"/> -->
        <div class="rightImg"></div>
        <div class="mtRight">
          <span class="greenLine"></span>
          02  把溯源码粘贴在农产品包装上
        </div>
        <div class="rightImg"></div>
        <div class="mtRight">
          <span class="greenLine"></span>
          03  通过微信扫一扫查看产品溯源信息
        </div>
        <div class="rightImg"></div>
      </div>
    </div>
    <div class="addBtn">
      <el-button type="primary" @click="toNext()">
        创建溯源码
      </el-button>
    </div>
  </div>
</template>

<script>
// import { getLandInfoPageApi, delLandInfoApi } from '@/api/agriLand'
// import { getSysSonDictListApi } from '@/api/dict'
export default {
  name: 'traceabilityCreated',
  data () {
    return {
    }
  },
  mounted () {
  },

  methods: {
    // 返回
    back () {
      this.$router.go(-1)
    },
    // 创建溯源码
    toNext () {
      this.$router.push({ path: '/shuzhongtian/traceability/bind' })
    }
  }
}
</script>

<style lang="scss" scoped>
.redColor {
    color: #F76560
}
.greenColor {
    color: #19B560
}
.back {
  font-size: 0.8vw;
  margin-bottom: 1.5625vw * 0.834;
  width: 5.2083vw;
  cursor: pointer;
  position: absolute;
  left: 0.25rem;
  top: 0.25rem;
}
.tableList {
  display: flex;
  justify-content: space-between;
  position: relative;
  .hasDiv {
    width: 49.1%;
    background: #fff;
    min-height: 7.5rem;
    padding-bottom: 1rem;
    border-radius: 0.2rem;
    .textCenter {
      text-align: center;
      padding: 0.4rem 0;
      font-size: 0.24rem;
      font-weight: bold
    }
    .textImage {
      width: 6rem;
      height: 3rem;
      background: #E4E7E9;
      border-radius: 0.15rem;
      margin: auto;
    }
    .centerLine {
      text-align: center;
      display: flex;
      justify-content: center;
    }
    .mtLeft {
      margin-top: 0.3rem;
      padding: 0 0.3rem 0 0.6rem;
      display: flex;
      align-items: baseline;
      .greenRaduis {
        border-radius: 50%;
        width: 0.1rem;
        height: 0.1rem;
        background: #19B560;
        margin-right: 0.1rem
      }
      > div {
        width: calc(100% - 0.3rem);
      }
    }
    .mtRight {
      margin-top: 0.1rem;
      display: flex;
      align-items: center;
      padding: 0 0.3rem 0 0.6rem;
      .greenLine {
        width: 0.05rem;
        height: 0.2rem;
        margin-right: 0.1rem;
        background: #19B560;
      }
    }
    .rightImg {
      width: 2.5rem;
      height: 1.25rem;
      background: #E4E7E9;
      border-radius: 0.1rem;
      margin: 0.08rem 0 0.05rem 0.6rem;
    }
  }
}
.addBtn {
  margin-top: 0.6rem;
  text-align: center;
  .el-button {
    padding: 0.18rem 1.1rem
  }
}
</style>
